<template>
    <div class="pagemax">
        <header class="header">
            <div class="imgheader">我是头部</div> 
        </header>

        <div class="bodymax"> <!-- body -->
            <bodyMax></bodyMax>
        </div>

        <footer class="footer"> <!-- 低 -->
            <footerPage></footerPage>
        </footer>

    </div>
</template>

<script>
import bodyMax from './body.vue'
import footerPage from './components/footerPage.vue' // 页脚
export default {
    components:{
        bodyMax,
        footerPage
    },
    data(){
        return {

        }
    }
}
</script>

<style scoped>
    .pagemax{
        width: 100%;
        height: 100%;
        /* border: 1px solid #000; */
    }
    .header{
        height: 50px;
        width: 100%;
        /* border: 1px solid #000; */
        display: flex;
        justify-content: space-between;
        background: rgb(103, 103, 208);
    }
    .imgheader{
        height: 100%;
        width: 35%;
        
    }
    .bodymax{
        height: calc(80% - 50px);
        width: 100%;
        /* border: 1px solid red; */
    }
    .footer{
        height: 20%;
        width: 100%;
        background: #7c7e80;
        /* border: 1px solid rgb(43, 120, 165); */
    }
</style>